{extend name="common/layout" /}
{block name="head"}
<link rel="stylesheet" href="__STATIC__/common/css/jquery-ui.css" media="all">
<script type="text/javascript" src="__STATIC__/common/js/jquery-ui.js"></script>
<style type="text/css">
    .alip-cloud,.cloud-aws,.cloud-alip,.aws-cloud{display: none;}
    .benduan{}
</style>
{/block}
{block name="main"}
<div class="admin-main fadeInUp animated" ng-app="hd" ng-controller="ctrl">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>{:lang('Network Open Application')}</legend>
    </fieldset>
    <blockquote class="layui-elem-quote layui-text">
      <p><b>{:lang('Relevant instructions:')}</b></p>
      <p>{:lang('Please fill in the following information form, number (*) are required.')}</p>
      <p>{:lang('After the application is submitted, it will take 1 working days to complete the audit, and the result will be notified to you.')}</p>
      
    </blockquote>
    <form class="layui-form nerwork-like" id="_form">
        <input type="hidden" name="is_sn" value="0">
        <input type="hidden" name="cart_id" id="_cart_id" value="0">
        <div class="layui-form-item">
            <label class="layui-form-label">* {:lang('Line Name')}</label>
            <div class="layui-input-4">
                <input type="text" name="name" lay-verify="required" placeholder="{:lang('Please Enter The Name')}" class="layui-input">
            </div>
        </div>
        
        
       
        <!--本端数据 start-->
        <div class="benduan">
            <div class="layui-form-item">
                <label class="layui-form-label">* {:lang('Local Access')}</label>
                <div class="layui-input-4">
                  <select name="type" lay-filter="type" lay-verify="required">
                    <option value="">{:lang('Please Select Type')}</option>
                    <?php foreach($types as $index=>$type):?>
                        <option value="{$index}">{$type}</option>
                    <?php endforeach;?>
                  </select>
                </div>
            </div>
            <!--公司机构&数据中心(私有云)类型表单-->
            <div class="type type-company">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">* {:lang('Region')}</label>
                        <div class="layui-input-inline">
                          <select name="country_id" lay-filter="countryId" data-value="0" data-aid="#city_id">
                            <option value="">{:lang('Please Choose')}</option>
                            <?php foreach($popArr as $pop):?>
                            <option value="{$pop['id']}">{$pop['name']}</option>
                            <?php endforeach;?>
                          </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">* {:lang('City')}</label>
                        <div class="layui-input-inline" >
                            <select name="city_id" data-value="0" data-pid="0" data-aid="#pop_id" id="city_id" lay-filter="cityId">
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">* {:lang('POP')}</label>
                        <div class="layui-input-inline">
                            <select name="pop_id" id="pop_id" lay-filter="popId">
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"> {:lang('End Access Address')}</label>
                        <div class="layui-input-inline">
                            <input type="text" name="access_addr" placeholder="{:lang('Fill in the detailed address of the organization / data center')}" class="layui-input">
                        </div>
                    </div>
                    
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                         <label class="layui-form-label">* {:lang('End Network')}</label>
                        <div class="layui-input-inline">
                            <input type="text" name="local_network" placeholder="{:lang('Format:192.168.24.0/24')}" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <!--end-->

            <!--公有云-->
            <div class="type type-publc">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">* {:lang('Gong Youyun')}</label>
                        <div class="layui-input-inline">
                          <select name="local_cloud_id" data-aid="#localcloudaddrid" lay-filter="localcloudid">
                            <option value="">{:lang('Please Choose')}</option>
                            <?php foreach($clouds as $cloud):?>
                            <option value="{$cloud['id']}" >{$cloud['name']}</option>
                            <?php endforeach;?>
                          </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">* {:lang('Local Cloud Connection Area')}</label>
                        <div class="layui-input-inline">
                          <select name="cloud_country" id="localcloudaddrid" lay-filter="localcloudaddrid" data-aid="#cloud_city" >
                            <option value="">{:lang('Please Choose')}</option>
                          </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">* {:lang('Local Access City')}</label>
                        <div class="layui-input-inline">
                          <select name="cloud_city" id="cloud_city" data-aid="#cloud_conter" lay-filter="cloudCity">
                            <option value="">{:lang('Please Choose')}</option>
                            
                          </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"> {:lang('Cloud Data Center')}</label>
                        <div class="layui-input-inline">
                          <select name="cloud_conter"  id="cloud_conter">
                            <option value="">{:lang('Please Choose')}</option>
                          </select>
                        </div>
                    </div>
                </div>
                <!--根据云接入类型呈现以下信息 阿里云&腾讯云-->
                <div class="cloud-alip">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" id="account_label1">* {:lang('Account ID')}</label>
                            <div class="layui-input-inline">
                                <input type="text" name="local_cloud_userid" placeholder="{:lang('Please enter the account ID')}" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <!--華爲云，新增 订单编号VPC ID，VPC所在可用区~-->
                    <div id='cloud-huawei1' style="display: none;">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">* {:lang('Order ON.')}</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="orderId1" placeholder="{:lang('Please input order number.')}" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">* {:lang('VPC ID')}</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="VPCID1" placeholder="{:lang('Please input VPC ID')}" class="layui-input">
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">* {:lang('VPC available area')}</label>
                                <div class="layui-input-inline">
                                  <input type="text" name="VPC1" placeholder="{:lang('Please enter the VPC availability area.')}" class="layui-input">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
               
                <!--阿里云&腾讯云 end-->
                <!--AWS-->  
                <div class="aws-cloud">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">* {:lang('Account ID')}</label>
                            <div class="layui-input-inline">
                                <input type="text" name="aws_local_cloud_userid" placeholder="{:lang('Please enter the account ID')}" class="layui-input">
                            </div>
                        </div>
                        
                    </div>  
                    <!-- <div class="layui-form-item">
                       
                        <div class="layui-inline">
                            <label class="layui-form-label">* {:lang('AccessID')}</label>
                            <div class="layui-input-inline">
                                <input type="text" name="local_aws_accessID" placeholder="{:lang('Please enter the AccessID')}" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">* {:lang('SecrectKey')}</label>
                            <div class="layui-input-inline">
                                <input type="text" name="local_aws_secrectKey" placeholder="{:lang('Please enter the SecrectKey')}" class="layui-input">
                            </div>
                        </div>
                    </div>  -->
                </div> 
                 <div class="layui-form-item">

                    <div class="layui-inline">
                        <label class="layui-form-label"  id="oth_local_network_label">* {:lang('End Network')}</label>
                        <div class="layui-input-inline">
                            <input type="text" name="oth_local_network" placeholder="{:lang('Format:192.168.24.0/24')}" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <!--AWS end-->
        </div>
        <!--对端接入start-->
        <div class="layui-form-item">
            <label class="layui-form-label">* {:lang('End-to-end access')}</label>
            <div class="layui-input-4">
              <select name="endtype" lay-filter="endtype" lay-verify="required">
                <option value="">{:lang('Please Select Type')}</option>
                <?php foreach($types as $index=>$type):?>
                    <option value="{$index}">{$type}</option>
                <?php endforeach;?>
              </select>
            </div>
        </div>
        <!--对端公有云的form-->
        <div class="etype etype-publc" style="display: none;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">* {:lang('Opposite end Gong Youyun')}</label>
                    <div class="layui-input-inline">
                      <select name="endcloudid" data-aid="#endcloudaddrid" lay-filter="endcloudid">
                        <option value="">{:lang('Please Choose')}</option>
                        <?php foreach($clouds as $cloud):?>
                        <option value="{$cloud['id']}" >{$cloud['name']}</option>
                        <?php endforeach;?>
                      </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">* {:lang('End Cloud Area')}</label>
                    <div class="layui-input-inline">
                      <select name="endcloudaddrid"  id="endcloudaddrid" lay-filter="endCloudaddrid" data-aid="#ecloud_city">
                        <option value="">{:lang('Please Choose')}</option>
                      </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">* {:lang('Peer Access City')}</label>
                    <div class="layui-input-inline">
                      <select name="ecloud_city" id="ecloud_city" data-aid="#ecloud_conter" lay-filter="ecloudCity">
                        <option value="">{:lang('Please Choose')}</option>
                        
                      </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label"> {:lang('Cloud Data Center')}</label>
                    <div class="layui-input-inline">
                      <select name="ecloud_conter"  id="ecloud_conter">
                        <option value="">{:lang('Please Choose')}</option>
                      </select>
                    </div>
                </div>
            </div>
            <!--根据云接入类型呈现以下信息 阿里云&腾讯云-->
            <div class="alip-cloud">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" id="account_label2">* {:lang('Account ID')}</label>
                        <div class="layui-input-inline">
                            <input type="text" name="end_userid" placeholder="{:lang('Please enter the account ID')}" class="layui-input">
                        </div>
                    </div>
                    
                </div>
                <!--華爲云，新增 订单编号VPC ID，VPC所在可用区~-->
                <div id='cloud-huawei2' style="display: none;">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">* {:lang('Order ON.')}</label>
                            <div class="layui-input-inline">
                                <input type="text" name="orderId2" placeholder="{:lang('Please input order number.')}" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">* {:lang('VPC ID')}</label>
                            <div class="layui-input-inline">
                                <input type="text" name="VPCID2" placeholder="{:lang('Please input VPC ID')}" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">* {:lang('VPC available area')}</label>
                            <div class="layui-input-inline">
                              <input type="text" name="VPC2" placeholder="{:lang('Please enter the VPC availability area.')}" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--阿里云&腾讯云 end-->
            <!--AWS-->  
            <div class="cloud-aws">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label" id="">* {:lang('Account ID')}</label>
                        <div class="layui-input-inline">
                            <input type="text" name="aws_end_userid" placeholder="{:lang('Please enter the account ID')}" class="layui-input">
                        </div>
                    </div>
                    
                </div>  
                <!-- <div class="layui-form-item">                     
                    <div class="layui-inline">
                        <label class="layui-form-label">* {:lang('AccessID')}</label>
                        <div class="layui-input-inline">
                            <input type="text" name="end_aws_accessID" placeholder="{:lang('Please enter the AccessID')}" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">* {:lang('SecrectKey')}</label>
                        <div class="layui-input-inline ">
                            <input type="text" name="end_aws_secrectKey"  placeholder="{:lang('Please enter the SecrectKey')}" class="layui-input">
                        </div>
                    </div>
                </div>   -->
            </div> 
            <div class="layui-form-item">
                
                <div class="layui-inline">
                    <div class="layui-inline">
                        <label class="layui-form-label" id="end_network_label">* {:lang('End-to-end Network')}</label>
                        <div class="layui-input-inline">
                            <input type="text" name="end_network"  placeholder="{:lang('Format:192.168.24.0/24')}" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--AWS end-->
        <!--公司-->
        <!--公司机构&数据中心(私有云)类型表单-->
        <div class="etype etype-company" style="display: none;">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">* {:lang('Region')}</label>
                    <div class="layui-input-inline">
                      <select name="ecountry_id" lay-filter="ecountryId" data-aid="#ecity_id">
                        <option value="">{:lang('Please Choose')}</option>
                        <?php foreach($popArr as $pop):?>
                        <option value="{$pop['id']}">{$pop['name']}</option>
                        <?php endforeach;?>
                      </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">* {:lang('City')}</label>
                    <div class="layui-input-inline" >
                        <select name="ecity_id" data-pid="0" data-aid="#epop_id" id="ecity_id" lay-filter="ecityId">
                        </select>
                    </div>
                </div>

            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">* {:lang('POP')}</label>
                    <div class="layui-input-inline">
                      <select name="epop_id" id="epop_id" lay-filter="epopId">
                        <option value="">{:lang('Please Choose')}</option>
                        
                      </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label"> {:lang('End to end access address')}</label>
                    <div class="layui-input-inline">
                        <input type="text" name="eaccess_addr" placeholder="{:lang('Fill in the detailed address of the organization / data center')}" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                
                
                <div class="layui-inline">
                     <label class="layui-form-label ">* {:lang('End-to-end Network')}</label>
                    <div class="layui-input-inline">
                        <input type="text" name="elocal_network" placeholder="{:lang('Format:192.168.24.0/24')}" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        
        <!--费用-->
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">* {:lang('Bandwidth')}</label>
                <div class="layui-input-inline" style="position: relative;width: 500px;">
                    <div id="mslider">
                        <div id="custom-handle" class="ui-slider-handle">
                            <span></span>
                        </div>
                     </div>
                    <span class="broadbandinput">
                        <label class="broadband-label">
                            <input type="test" value="1" id="_broadband" name="broadband" class="broadband">
                            <span class="autobtn"></span>
                            <span class="_add"></span>
                            <span class="_min"></span>
                        </label> 
                        Mbps
                    </span> 
<!--                         <input type="text" name="broadband" lay-verify="required" placeholder="{:lang('请输入带宽(Mbps)')}" class="layui-input">
-->             </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">* {:lang('Purchase Time')}</label>
                <div class="layui-input-inline">
                   <select name="daylength"  lay-filter="_daylength" lay-verify="required" id="daylength">
                       <option value="">{:lang('Please Choose')}</option>
                       <?php foreach($daLength as $dindex=>$d):?>
                        <option value="{$dindex}">{$d}</option>
                        <?php endforeach;?>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">{:lang('Planned opening time')}</label>
                <div class="layui-input-inline">
                    <input type="text" id="plan_time" readonly="" name="plan_time" placeholder="{:lang('Planned opening time')}" class="layui-input">
                </div>
            </div>
        </div>
        <!--图片-->
        <!-- <div class="layui-form-item">
            <label class="layui-form-label">* {:lang('Media')}</label>
            <div class="layui-input-4" style="position: relative;">
                <input type="text" name="media" placeholder="" id="_media" lay-verify="required" class="layui-input" readonly="" >
                <button type="button" class="layui-btn layui-btn-primary" id="_mediaBtn" style="position: absolute;right: 0px;top:0"><i class="icon icon-upload3"></i>{:lang('Upload')}</button>
                
            </div>
        </div> -->
        <!--备注-->
       
        <div class="layui-form-item">
            <label class="layui-form-label">{:lang('Remarks')}</label>
            <div class="layui-input-4">
                <textarea placeholder="{:lang('Please enter content')}" id="_create_remarks" name="remarks" class="layui-input" style="width:100%;height: 50px;"></textarea>
            </div>
        </div>
    <!--end-->
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
                
                <button type="reset" class="layui-btn layui-btn-primary" id="_resetform" >{:lang('Reset')}</button>
                　
                <button type="button" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="submit">{:lang('Add')}</button>
                
            </div>
            <div class="layui-form-mid layui-word-aux" id="price-money"></div>
        </div>
    </form>
    <div class="">
        <br/><br/>
     <fieldset class="layui-elem-field layui-field-title">
        <legend>{:lang('Line Lists')}</legend>
    </fieldset>
  <table class="layui-table">
    <colgroup>
      <col width="200">
      <col width="150">
      <col width="200">
      <col width="200">
      <col width="200">
      <col width="200">
      <col width="100">
      <col>
    </colgroup>
    <thead>
      <tr>
<!--         <th>No.</th>
 -->    <th>{:lang('Line Name')}</th>
        <th>{:lang('Local Access')}</th>
        <th>{:lang('Peer Access')}</th>
        <th>{:lang('broadband')}</th>
        <th>{:lang('Purchase Time')}</th>
        <th>{:lang('Monthly rental fee')}</th>
        <th>{:lang('Delete')}</th>
      </tr> 
    </thead>
    <tbody id="_lists">
    <?php if($carts):?>
    <?php foreach($carts as $cat):?>
        <tr>
            <td>{$cat['name']}</td>
            <td>{$cat['typelabel']}</td>
            <td>{$cat['endlabel']}</td>
            <td>{$cat['broadband']} (MB)</td>
            <td>{$cat['daLength']}</td>
            <td>{$cat['total']} / {:lang('Month')}</td>
            <td style="width:100px;">
                <button data-href="{:U('cart/delete')}?_id={$cat['_id']}" class="layui-btn layui-btn-danger layui-btn-xs _delete">{:lang('Delete')}</button>
                <button data-href="{:U('cart/getData')}?_id={$cat['_id']}" class="layui-btn  layui-btn-xs _edit" data-aid="{$cat['_id']}">{:lang('edit')}</button>
            </td>
        </tr>
    <?php endforeach;?>
    <?php else:?>
     <tr id="not-list"><td colspan="7" align="center" >{:lang('Not Data...')}</td></tr>
     <?php endif;?>
    </tbody>
    
</tbody>
  </table>
  <?php if($carts):?>
    <div style="text-align: center;"><button type="button" class="layui-btn" id="_confirm" data-href="{:U('cart/confirm')}">{:lang('Submit')}</button>

  <?php else:?>
       <div style="text-align: center;"><button type="button" class="layui-btn layui-btn-disabled" id="_confirm" data-href="{:U('cart/confirm')}">{:lang('Submit')}</button>

     <?php endif;?>
  </div>
</div>
</div>
{/block}
{block name="footer"}
<script type="text/javascript" id="network-data">
    <tr>
        <td>{{_name_}}</td>
        <td>{{_tylelabel_}}</td>
        <td>{{_endlabel_}}</td>
        <td>{{_bandwidth_}} (MB)</td>
        <td>{{_daLength_}}</td>
        <td>{{_total_}} / {:lang('Month')}</td>
        <td style="width:100px;">
            <button data-href="{:U('cart/delete')}?_id={{_id_}}" class="layui-btn layui-btn-danger layui-btn-xs _delete">{:lang('Delete')}</button>
            <button data-href="{:U('cart/getData')}?_id={{_id_}}" class="layui-btn  layui-btn-xs _edit" data-aid="{{_id_}}">{:lang('edit')}</button>
        </td>
    </tr>
</script>
<script>
    var _item=1;
    var myDmoe = null;
    layui.use(['form', 'layer','laydate','upload'], function () {
        var form = layui.form, layer = layui.layer,$= layui.jquery,laydate = layui.laydate,upload = layui.upload;
        
        form.on('submit(submit)', function (data) {
            loading = layer.load(1,{shade:[0.1,'#fff']});
            // 提交到方法 默认为本身
            //data.field.id = $scope.field.id;
            $.post("", data.field, function (res) {
                layer.close(loading);
                if (res.code > 0) {

                    var n = res.data;
                    layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                        //location.href = res.url;
                        var _datalist = $("#network-data").html();
                        _datalist = _datalist.replace("{{_name_}}",n.name);
                        _datalist = _datalist.replace("{{_tylelabel_}}",n.typelabel);
                         _datalist = _datalist.replace("{{_endlabel_}}",n.endlabel);
                        _datalist = _datalist.replace("{{_endarea_}}",n.endarea);
                        _datalist = _datalist.replace("{{_bandwidth_}}",n.broadband);
                        _datalist = _datalist.replace("{{_daLength_}}",n.daLength);
                        _datalist = _datalist.replace("{{_total_}}",n.total);
                        _datalist = _datalist.replace("{{_id_}}",n._id);
                        _datalist = _datalist.replace("{{_id_}}",n._id);
                        _datalist = _datalist.replace("{{_id_}}",n._id);
                        $("#not-list").hide();
                        $("#_lists").append(_datalist);
                        $("#_confirm").removeClass('layui-btn-disabled');
                        resetForm();//重置表单
                        if(myDmoe != null){
                            $(myDmoe).remove();
                        }
                    });
                } else {
                    layer.msg(res.msg, {time: 1800, icon: 2});
                }
            });
        });
        /*绑定本端接入类型（公司机构、数据中心（私有云）、公有云）*/
        form.on("select(type)",function(obj){

            if(obj.value == 3){  //公有云
               $(".type").hide(); 
               $(".type-publc").show(); 
            }else if(obj.value > 0){
                $(".type").hide();
                $(".type-company").show(); 
            }else{
                $(".type").hide(); 
            }
        })
        form.on("select(endtype)",function(obj){

            if(obj.value == 3){  //公有云
               $(".etype").hide(); 
               $(".etype-publc").show(); 
            }else if(obj.value > 0){
                $(".etype").hide();
                $(".etype-company").show(); 
            }else{
                $(".etype").hide(); endtype
            }
        })
        /*移删数据*/
        $('#_lists').on("click","._delete",function(){
            var _this = $(this);
            var confirm = layer.confirm('{:lang("confirmed?")}', function(index){
                layer.close(confirm);
                loading =layer.load(1, {shade: [0.1,'#fff']});
                $.post(_this.data('href'),{},function (res) {
                    layer.close(loading);
                    if (res.code==1) {
                        _this.parents('tr').remove();
                        if($('#_lists').find('tr').length == 0){
                            $("#_confirm").addClass('layui-btn-disabled');
                            $('#_lists').html('<tr id="not-list"><td colspan="8" align="center" >{:lang('Not Data...')}</td></tr>');
                        }
                        _item--;
                    }else{
                        layer.msg(res.msg,{time:1000,icon:2});
                        return false;
                    }
                })
            })     

        })
        /*确认提交*/
        $("#_confirm").click(function(){
            var _this = $(this);
            if(_this.hasClass('layui-btn-disabled')){
                return false;
            }
            loading =layer.load(1, {shade: [0.1,'#fff']});
            $("#_confirm").addClass('layui-btn-disabled');
            $.post(_this.data('href'),{},function (res) {
                layer.close(loading);   
                if (res.code==1) {
                    layer.msg(res.msg, {time: 1800, icon: 1}, function () {
                        location.href = res.url;
                    });
                }else{
                    $("#_confirm").removeClass('layui-btn-disabled');
                    layer.msg(res.msg,{time:1000,icon:2});
                    return false;
                }
            })
        })
        /*本端公有云（云列表）*/
        form.on("select(localcloudid)",function(obj){
            var doem = obj.elem.dataset.aid;
            $("#localcloudaddrid,#cloud_city,#cloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            if(obj.value > 0){
                if(obj.value == 3737){  //aws云
                    $(".cloud-alip").hide();
                    $(".aws-cloud").show();
                }else{
                    $(".cloud-alip").show();
                    $(".aws-cloud").hide();
                }
                $.post("{:U('cloud/getClouList')}",{pid:obj.value},function(res){
                    $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                    if(res.code == 1){
                        $.each(res.items,function(i,item){
                            $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        })
                    }
                    form.render();
                },'json')
            }else{
                $(".aws-cloud").hide();
                $(".cloud-alip").hide();
            }
            $("#cloud-huawei1").hide();
            //$("#oth_local_network_label").text($("#oth_local_network_label").text().replace("*",""));
            /*設置label*/
            if(obj.value == 3739){  //Google
                $("#account_label1").text("* Pairing key")
                $("input[name='local_cloud_userid'").attr('placeholder',"{:lang('Please enter Pairing key')}")
            }else if(obj.value == 3738){ //Azure
                $("#account_label1").text("* Service Key");
                $("input[name='local_cloud_userid'").attr('placeholder',"{:lang('Please enter the service key')}")
            }else if(obj.value == 3742){ //華爲云
                $("#cloud-huawei1").show();
                $("#account_label1").text("* Account")
                $("input[name='local_cloud_userid'").attr('placeholder',"{:lang('Please enter the name of the account')}")
                //$("#oth_local_network_label").text("*"+$("#oth_local_network_label").text());
            }else{  //其他
                $("#account_label1").text("* {:lang('Account ID')}")
                $("input[name='local_cloud_userid'").attr('placeholder',"{:lang('Please enter the account ID')}")
            }
        })
        /*地区*/
        form.on("select(localcloudaddrid)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value =  obj.elem.dataset.value;
            $("#cloud_city,#cloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            $.post("{:U('cloud/getCloudCity')}",{country_id:obj.value,cloud_id:$("select[name='local_cloud_id']").val()},function(res){
                $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value  == item.id){
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                        }else{
                             $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                    })
                }
                form.render();
            },'json')
        })
        /*本端城市*/
        form.on("select(cloudCity)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value =  obj.elem.dataset.value;
            $("#cloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            $.post("{:U('cloud/getCloudItems')}",{city_id:obj.value,cloud_id:$("select[name='local_cloud_id']").val(),country_id:$("#localcloudaddrid").val()},function(res){
                $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value  == item.id){
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                        }else{
                             $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                       
                    })
                    /*计算价钱*/
                    _alculator({
                        url:"{:U('query')}",
                        data:$("#_form").serializeArray(),
                        notice:"{:lang('The cost is being calculated....')}"
                    })
                }
                form.render();
            },'json')
        })
        
        /*对端公有云（云列表）*/
        form.on("select(endcloudid)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value =  obj.elem.dataset.value;
            $("#endCloudaddrid,#ecloud_city,#ecloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            if(obj.value > 0){
                if(obj.value == 3737){  //aws云
                    $(".alip-cloud").hide();
                    $(".cloud-aws").show();
                }else{
                    $(".alip-cloud").show();
                    $(".cloud-aws").hide();
                }
                $.post("{:U('cloud/getClouList')}",{pid:obj.value},function(res){
                    $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                    if(res.code == 1){
                        $.each(res.items,function(i,item){
                            if(value == item.id){
                                $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                            }else{
                                $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                            }
                            
                        })
                    }
                    form.render();
                },'json')
            }else{
                $(".alip-cloud").hide();
                $(".cloud-aws").hide();
            }
            //$("#end_network_label").text($("#end_network_label").text().replace("*",""))
            $("#cloud-huawei2").hide();
            /*設置label*/
            if(obj.value == 3739){  //Google
                $("#account_label2").text("* Pairing key")
                $("input[name='end_userid'").attr('placeholder',"{:lang('Please enter the Pairing key')}")
            }else if(obj.value == 3738){ //Azure
                $("#account_label2").text("* Service Key")
                $("input[name='end_userid'").attr('placeholder',"{:lang('Please enter the service key')}")
            }else if(obj.value == 3742){ //華爲云
                $("#cloud-huawei2").show();
                $("#account_label2").text("* Account")
                $("input[name='end_userid'").attr('placeholder',"{:lang('Please enter the name of the account')}")
                //$("#end_network_label").text("*"+$("#end_network_label").text())
            }else{  //其他
                $("#account_label2").text("* {:lang('Account ID')}")
                $("input[name='end_userid'").attr('placeholder',"{:lang('Please enter the account ID')}")
            }
        })
        /*地区*/
        form.on("select(endCloudaddrid)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value =  obj.elem.dataset.value;
            $("#ecloud_city,#ecloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            $.post("{:U('cloud/getCloudCity')}",{country_id:obj.value,cloud_id:$("select[name='endcloudid']").val()},function(res){
                $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                        }else{
                            $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                    })
                }
                form.render();
            },'json')
        })
        /*对端城市*/
        form.on("select(ecloudCity)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value =  obj.elem.dataset.value;
            $("#ecloud_conter").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            $.post("{:U('cloud/getCloudItems')}",{city_id:obj.value,cloud_id:$("select[name='endcloudid']").val(),country_id:$("#endcloudaddrid").val()},function(res){
                $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                        }else{
                            $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                    })
                    /*计算价钱*/
                    _alculator({
                        url:"{:U('query')}",
                        data:$("#_form").serializeArray(),
                        notice:"{:lang('The cost is being calculated....')}"
                    })
                }
                form.render();
            },'json')
        })
        /*本端pop点切换*/
        form.on("select(countryId)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value = obj.elem.dataset.value;
            $(doem).attr('data-pid',obj.value);
            $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
            $("#pop_id").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            loading =layer.load(1, {shade: [0.1,'#fff']});
            $.post("{:U('pop/popList')}",{pid:obj.value},function(res){
                layer.close(loading);
                //$("input[name='access_addr']").val('')
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                        }else{
                            $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                        
                    })
                }
                form.render();
            },'json')
        })
        /*pop点切换*/
        form.on("select(cityId)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value = obj.elem.dataset.value;
            $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            
            $.post("{:U('pop/popItems')}",{city_id:obj.value,area_id:obj.elem.dataset.pid},function(res){
                layer.close(loading);
                //$("input[name='access_addr']").val('');
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            $(doem).append("<option value='"+item.id+"' selected data-address='"+item.address+"'>"+item.name+"</option")
                        }else{
                            $(doem).append("<option value='"+item.id+"' data-address='"+item.address+"'>"+item.name+"</option")
                        }
                        
                    })
                    
                }
                form.render();
            },'json')
        })
        form.on("select(popId)",function(obj){
            var _addres = $("#pop_id").find("option[value='"+obj.value+"']").data('address');
            $("input[name='access_addr']").val(_addres)
            /*计算价钱*/
            _alculator({
                url:"{:U('query')}",
                data:$("#_form").serializeArray(),
                notice:"{:lang('The cost is being calculated....')}"
            })
        })
        /*对端pop点接入*/
        form.on("select(ecountryId)",function(obj){
            var doem = obj.elem.dataset.aid;
            $(doem).attr('data-pid',obj.value);
            var value = obj.elem.dataset.value;
            $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
            $("#epop_id").html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            $.post("{:U('pop/popList')}",{pid:obj.value},function(res){
                //$("input[name='eaccess_addr']").val('')
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            $(doem).append("<option value='"+item.id+"' selected >"+item.name+"</option")
                        }else{
                             $(doem).append("<option value='"+item.id+"'>"+item.name+"</option")
                        }
                        
                    })
                }
                form.render();
            },'json')
        })
        /*pop点切换*/
        form.on("select(ecityId)",function(obj){
            var doem = obj.elem.dataset.aid;
            var value = obj.elem.dataset.value;
            $(doem).html("<option value=''>{:lang('Please Choose')}</option>");
            form.render();
            $.post("{:U('pop/popItems')}",{city_id:obj.value,area_id:obj.elem.dataset.pid},function(res){
                //$("input[name='eaccess_addr']").val('');
                if(res.code == 1){
                    $.each(res.items,function(i,item){
                        if(value == item.id){
                            $(doem).append("<option value='"+item.id+"' data-address='"+item.address+"' selected >"+item.name+"</option")
                        }else{
                            $(doem).append("<option value='"+item.id+"' data-address='"+item.address+"'>"+item.name+"</option")
                        }
                        
                    })
                    
                }
                form.render();
            },'json')
        })
        form.on("select(epopId)",function(obj){
            var _addres = $("#epop_id").find("option[value='"+obj.value+"']").data('address');
            $("input[name='eaccess_addr']").val(_addres)
            /*计算价钱*/
            _alculator({
                url:"{:U('query')}",
                data:$("#_form").serializeArray(),
                notice:"{:lang('The cost is being calculated....')}"
            })
        })
        /*时间切换*/
        form.on("select(_daylength)",function(obj){
            /*计算价钱*/
            _alculator({
                url:"{:U('query')}",
                data:$("#_form").serializeArray(),
                notice:"{:lang('The cost is being calculated....')}"
            })
        })
        //日期
        laydate.render({
            elem: '#_date',
            lang: 'en'
        });
        /*計劃開通時間*/
        laydate.render({
            elem: '#plan_time',
            lang: 'en',
            min:+1
        });
        setSlideMb(function(){
            _alculator({
                url:"{:U('query')}",
                data:$("#_form").serializeArray(),
                notice:"{:lang('The cost is being calculated....')}"
            })
        });
        /*编辑数据*/

        $("body").on("click","._edit",function(){
            var _this = $(this)
            if(_this.hasClass('disabled')){
                return false;
            }
            myDmoe = _this.parents('tr');
            _this.addClass('disabled')
            loading =layer.load(1, {shade: [0.1,'#fff']});
            $('#_cart_id').val(_this.data('aid'));
            $.post(_this.data('href'),{},function(res){
                
                _this.removeClass('disabled') 
                if(res.code == 1){
                    var field = res.data;
                    $("input[name='name']").val(field.name);
                    // $('select[name="type"]').next().find('.layui-anim').children('.layui-this').click();
                    setSelectedclick('type',field.type);
                    if(field.type == 3){  //公有云

                        setSelectedclick('local_cloud_id',field.local_cloud_id);
                        $("select[name='local_cloud_id']").attr('data-value',field.cloud_country);
                        setSelectedclick('cloud_country',field.cloud_country);
                        $("select[name='cloud_country']").attr('data-value',field.cloud_city);
                        setSelectedclick('cloud_city',field.cloud_city);
                        $("select[name='cloud_city']").attr('data-value',field.cloud_conter);
                       if(field.local_cloud_id == 3737){  //aws云
                            $(".cloud-alip").hide();
                            $(".aws-cloud").show();
                            $("input[name='aws_local_cloud_userid']").val(field.aws_local_cloud_userid)
                            //$("input[name='local_aws_accessID']").val(field.local_aws_accessID)
                            //$("input[name='local_aws_secrectKey']").val(field.local_aws_secrectKey)
                        }else{
                            $(".cloud-alip").show();
                            $(".aws-cloud").hide();
                            $("input[name='local_cloud_userid']").val(field.local_cloud_userid)
                            
                        }
                        $("input[name='oth_local_network']").val(field.oth_local_network)
                       
                    }else{
                        setSelectedclick('country_id',field.country_id);
                        $("select[name='country_id']").attr('data-value',field.city_id);
                        setSelectedclick('city_id',field.city_id);
                        $("select[name='city_id']").attr('data-value',field.pop_id);
                        $("input[name='access_addr']").val(field.access_addr);
                        $("input[name='local_network']").val(field.local_network)
                        if(field.endcloudid == 3742){ //华为云
                            $("input[name='orderId1']").val(field.orderId1);
                            $("input[name='VPCID1']").val(field.VPCID1);
                            $("input[name='VPC1']").val(field.VPC1);
                        }
                    }
                    /*对端接入*/
                    
                    setSelectedclick('endtype',field.endtype);
                    /*公有雲*/
                    if(field.endtype == 3){
                        setSelectedclick('endcloudid',field.endcloudid);
                        $("select[name='endcloudid']").attr('data-value',field.endcloudaddrid);
                        setSelectedclick('endcloudaddrid',field.endcloudaddrid);
                        $("select[name='endcloudaddrid']").attr('data-value',field.ecloud_city);
                        setSelectedclick('ecloud_city',field.ecloud_city);
                        $("select[name='ecloud_city']").attr('data-value',field.ecloud_conter);
                        if(field.endcloudid == 3737){  //aws云
                            $(".alip-cloud").hide();
                            $(".cloud-aws").show();
                            $("input[name='aws_end_userid']").val(field.aws_end_userid);
                            //$("input[name='end_aws_accessID']").val(field.end_aws_accessID)
                            //$("input[name='end_aws_secrectKey']").val(field.end_aws_secrectKey);
                        }else{
                            $(".alip-cloud").show();
                            $(".cloud-aws").hide();
                            $("input[name='end_userid']").val(field.end_userid);
                            
                            if(field.endcloudid == 3742){ //华为云
                                $("input[name='orderId2']").val(field.orderId2);
                                $("input[name='VPCID2']").val(field.VPCID2);
                                $("input[name='VPC2']").val(field.VPC2);
                            }
                        }
                        $("input[name='end_network']").val(field.end_network)
                    }else{ //私有雲
                        setSelectedclick('ecountry_id',field.ecountry_id);
                        $("select[name='ecountry_id']").attr('data-value',field.ecity_id);
                        setSelectedclick('ecity_id',field.ecity_id);
                        $("select[name='ecity_id']").attr('data-value',field.epop_id);
                        $("input[name='eaccess_addr']").val(field.eaccess_addr);
                        $("input[name='elocal_network']").val(field.end_network)
                    }
                    $("input[name='plan_time']").val(field.plan_time);
                    $("input[name='broadband']").val(field.broadband).blur()
                    $("select[name='daylength']").find("option[value='"+field.daylength+"']").attr('selected',true);
                    $("#_create_remarks").val(field.remarks);
                    $("input[name='media']").val(field.media);
                    if(field.media != ''){
                        $('#_media').parent().find("#_media_view").remove();
                        $('#_media').parent().append('<p id="_media_view"><img src="'+field.media+'"style="width:100px;max-height:100px;margin-top:3px;" /></p>')
                    }
                    layer.close(loading);  
                    form.render();
                }
            },'json')
        })
        /*上传图片*/
        //普通图片上传
        var loading = null;
        var uploadInst = upload.render({
            elem: '#_mediaBtn'
            ,url: '{:url("UpFiles/upload")}'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                loading =layer.load(1, {shade: [0.1,'#fff']});
            }
            ,done: function(res){
                layer.close(loading);  
                //上传成功
                if(res.code>0){
                    $('#_media').val(res.url);
                    $('#_media').parent().find("#_media_view").remove();
                    $('#_media').parent().append('<p id="_media_view"><img src="'+res.url+'"style="width:100px;max-height:100px;margin-top:3px;" /></p>')
                }else{
                    //如果上传失败
                    return layer.msg("{:lang('Upload failure')}");
                }
            }
            ,error: function(){
                layer.close(loading);  
                //演示失败状态，并实现重传
                return layer.msg("{:lang('Upload failure')}");
            }
        });
    });
    /*重置表单*/
    function resetForm(){
        $("#_resetform").click();
        $(".alip-cloud").hide();
        $(".cloud-aws").hide();
        $(".aws-cloud").hide();
        $(".cloud-alip").hide();
        $(".type").hide();
        $(".etype").hide();
        $("#_broadband").blur();
        $("#price-money").html('')
        $("#not-list").remove();
        $('#_media').parent().find("#_media_view").remove();
    }
</script>
{/block}